<ng-container *ngIf="editorService">
  <div class="row">
    <div class="col">
      <span [hidden]="!editorService.isNew" class="badge badge-primary">CREATING NEW</span>
      <div class="query-type-switch" [hidden]="editorService.isNew">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="diff-query-input" [(ngModel)]="selectedQuery" [value]="'diff'" />
          <label class="form-check-label" for="diff-query-input">Diff-query</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" id="full-query-input" [(ngModel)]="selectedQuery" [value]="'full'" />
          <label class="form-check-label" for="full-query-input">Full-query</label>
        </div>
      </div>
    </div>

    <div class="col">
      <div *ngIf="docUrl" class="wiki-link mb-2">
        <a [href]="docUrl" target="_blank"> <i class="fas fa-link"></i> {{ editorService.entityTable }} documentation </a>
      </div>
    </div>
  </div>

  <keira-highlightjs-wrapper id="diff-query" [code]="editorService.diffQuery" [hidden]="showFullQuery()"></keira-highlightjs-wrapper>
  <keira-highlightjs-wrapper id="full-query" [code]="editorService.fullQuery" [hidden]="!showFullQuery()"></keira-highlightjs-wrapper>

  <div>
    <button type="button" class="btn btn-secondary btn-sm" (click)="copy()" id="copy-btn"><i class="fa fa-copy fa-sm"></i> Copy</button>
    <button type="button" class="btn btn-primary btn-sm" (click)="execute()" id="execute-btn">
      <i class="fa fa-bolt fa-sm"></i> Execute
    </button>
    <button type="button" class="btn btn-danger btn-sm float-end" (click)="reload()" id="reload-btn">
      <i class="fa fa-sync fa-sm"></i> Reload
    </button>
  </div>

  <keira-query-error [error]="editorService.error"></keira-query-error>
</ng-container>
